<template>
  <div class="page">
    <!-- <div class="page-title">我的订单</div> -->

    <div class="page-ctx">
      <div class="tab-box">
        <div class="tab-list">
          <div
            v-for="(item, index) in tabList"
            :key="index"
            class="tab-item"
            :class="tabSelect.value == item.value ? 'active' : ''"
            @click="do_toggle_tab(item)"
          >
            {{ item.title }}
            <span class="number" v-if="item.num">{{
              item.num
            }}</span>
          </div>
        </div>
        <div class="search-box">
          <input
            v-model="keyword"
            type="text"
            placeholder="输入订单号"
            @blur="query_order"
          />
          <button @click="do_search()">
            <img src="@img/order/order-search.png" alt="">
          </button>
          <!-- <button @click="do_reset()">重置</button> -->
        </div>
      </div>

      <div class="page-sec">
        <!-- <orderList :list="orders" @confirm="emitConfirm"/> -->

        <div class="order-list-wrap">
          <div class="info-item" v-for="(item, index) in orders" :key="index">
            <div class="base-box flex-between">
              <div class="date">{{ item.createTime }}</div>
              <div class="order-code">
                订单号：
                <span>{{ item.orderCode }}</span>
              </div>
              <div class="order-code">
                支付方式：
                <span>{{payTypeMap[item.payType]}}</span>
              </div>
              <div class="order-state" :class="'state-' + item.orderStatus">
                {{ item.statusInfo }}
              </div>
            </div>

            <div class="product-box">
              <div class="product-list">
                <div
                  class="product-item flex"
                  v-for="(product_item, product_index) in item.orderGoodsList"
                  :key="product_index"
                >
                  <div
                    class="box-image cover"
                    @click="mix_to_product(product_item)"
                  >
                    <!-- <img :src="good.img" alt /> -->
                    <el-image :src="product_item.imgUrl">
                      <div slot="error" class="image-slot">
                        <img :src="product_item.imgUrl" />
                      </div>
                    </el-image>
                  </div>
                  <div class="box-title">
                    <div
                      class="product-title"
                      @click="mix_to_product(product_item)"
                    >
                      {{ product_item.goodsName }}
                    </div>
                    <div class="product-sku">{{ product_item.goods.manufacturer }}</div>
                  </div>
                  <!-- <div class="box-sku">
                    <div class="product-sku">{{ product_item.keyVals }}</div>
                  </div> -->
                  <div class="box-price">
                    {{ vuex_huobi }} {{ product_item.goodsPrice }}
                  </div>
                  <div class="box-num">x {{ product_item.goodsNum }}</div>
                  <div class="box-subtotal">
                    {{ vuex_huobi }} {{ (product_item.goodsPrice*product_item.goodsNum).toFixed(2) }}
                  </div>
                  <!-- <div class="box-refund">
                    <div class="refund-act">
                      申请售后
                    </div>
                  </div> -->
                </div>
              </div>
            </div>

            <div class="info-heji">
              <div class="heji">
                <div class="heji-num">
                  共 <b>{{ item.count_goods }}</b> 个商品
                </div>
                <div class="heji-money">
                  合计金额： <b>￥{{ item.actualPrice }}</b>
                </div>
              </div>

              <div class="btn-actions">
                <button class="btn-ripple fit-text" @click="toDetail(item)">
                  订单详情
                </button>
                <button
                  v-if="item.orderStatus == 0"
                  class="btn-ripple fit-text "
                  @click="doCancel(item)"
                >
                  取消订单
                </button>
                <button
                  v-if="item.orderStatus == 0"
                  class="btn-ripple fit-text btn-bg"
                  @click="doPay(item)"
                >
                  去支付
                </button>
                <button
                  v-if="item.ifDel == 1"
                  class="btn-ripple fit-text btn-bg"
                  @click="doDelete(item)"
                >
                  删除订单
                </button>
                <button
                  v-if="item.orderStatus == 2"
                  class="btn-ripple fit-text btn-bg"
                  @click="doReceive(item)"
                >
                  确认收货
                </button>
                <!-- <button
                  v-if="item.ifComment == 1"
                  class="btn-ripple fit-text btn-bg"
                  @click="doReview(item)"
                >
                  去评价
                </button> -->
                <button
                  class="btn-ripple fit-text "
                  v-if="item.orderStatus !== '0'"
                >
                  再来一单
                </button>
                <button
                  class="btn-ripple fit-text "
                   v-if="item.orderStatus == 2"
                >
                  查看检验报告
                </button>
                <button
                  class="btn-ripple fit-text btn-bg w-126"
                  v-if="item.orderStatus == 2"
                >
                  查看发货明细表
                </button>
                <!-- <button
                  v-if="item.orderStatus >= 5"
                  class="btn-ripple fit-text btn-bg"
                  @click="doRefund(item)"
                >
                  售后
                </button> -->
                <!-- <button v-if="item.is_aa == 1" class="btn-ripple fit-text btn-bg" @click="toDetail(item)">
            查看物流
          </button> -->
              </div>
            </div>
          </div>
        </div>

        <div
          v-if="count"
          class="pagination-box"
          style="margin-top: 40px; text-align: right"
        >
          <el-pagination
            background
            layout="total, prev, pager, next"
            @current-change="on_current_change"
            :current-page.sync="pagination.page"
            :page-size="pagination.pageNum"
            :total="count"
          ></el-pagination>
        </div>

        <el-empty v-if="!count" description="没有查询到订单信息..."></el-empty>
      </div>
    </div>

    <order_cancel_modal
      ref="order_cancel_modal"
      @confirm="emitConfirm"
      data-type="取消"
    />
    <order_delete_modal
      ref="order_delete_modal"
      @confirm="emitConfirm"
      data-type="删除"
    />
    <order_receive_modal
      ref="order_receive_modal"
      @confirm="emitConfirm"
      data-type="收货"
    />
    <order_refund_modal
      ref="order_refund_modal"
      @confirm="emitConfirm"
      data-type="售后"
    />
  </div>
</template>

<script>
// import orderList from "@/components/order/orderList.vue"; //订单列表
import order_cancel_modal from "@/components/order/order_cancel_modal.vue"; //取消
import order_delete_modal from "@/components/order/order_delete_modal.vue"; //删除
import order_receive_modal from "@/components/order/order_receive_modal.vue"; //收货
import order_refund_modal from "@/components/order/order_refund_modal.vue"; //售后

import { mapState } from "vuex";

export default {
  name: "servicePage",
  components: {
    // orderList,
    order_cancel_modal,
    order_delete_modal,
    order_receive_modal,
    order_refund_modal,
  },
  data() {
    return {
      tabSelect: {
        title: "全部",
        value: -1,
      },
      payTypeMap: {
        '0':'微信支付',
        '1':'支付宝支付',
        '2': '授信额度',
        '3': '账单周期',
        '4': "余额"
      },
      number_info: {},
      //
      orders: [],
      pagination: {
        page: 1,
        pageNum: 10,
      },
      count: 0,
      keyword: "",
    };
  },
  computed: {
    ...mapState([""]),

    tabList() {
      //scene
      //筛选状态：0-全部 1-待支付 2-待发货 3-待收货 4-待核销 5-已完成 6-待评价 7-已取消
      //orderStatus
      //订单状态 0待付款 1已付款/待发货 2已发货/待收货 3部分退款 4已关闭
      let list = [
        { value: -1, title: "全部订单", number_key: "orderNum", num:0 },
        { value: 0, title: "待付款", number_key: "orderNeedPay" , num:0 },
        { value: 1, title: "待发货", number_key: "orderNeedDelivery" , num:0 },
        { value: 2, title: "待收货", number_key: "orderNeedShouhuo" , num:0 },
        // { value: 3, title: "部分退款", number_key: "orderNeedShouhuo" },
        { value: 4, title: "已取消", number_key: "" , num:0 },
        // { value: 6, title: "待审核",},
      ];
      return list;
    },
  },
  created() {
    this.setView();
  },

  methods: {
    emitConfirm() {
      this.query_order();
    },
    setView() {
      if (this.$route.query.status) {
        this.tabSelect =
          this.tabList.find((v) => v.value == this.$route.query.status) ||
          this.tabList[0];
      }

      // this.query_userIndex();
      this.query_order();
    },

    //用户主页数据
    query_userIndex() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_userInfo",
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.number_info = {
            orderNeedComment: data.orderNeedComment || 0,
            orderNeedDelivery: data.orderNeedDelivery || 0,
            orderNeedHexiao: data.orderNeedHexiao || 0,
            orderNeedPay: data.orderNeedPay || 0,
            orderNeedShouhuo: data.orderNeedShouhuo || 0,
            // orderNum: data.orderNum || 0,
            orderRefundNum: data.orderRefundNum || 0,
          };
        }
      });
    },

    //订单列表
    query_order() {

      this.$httpApi('/api/v1/purchaser/orderStatus/nums',{},'get').then(res => {

        this.tabList.forEach((item) => {
          switch(item.value){
            case 0:
              item.num = res.data.waitPay;
              break;
            case 1:
              item.num = res.data.waitDelivery;
              break;
            case 2:
              item.num = res.data.delivery;
              break;
            case 4:
              item.num = res.data.cancel;
              break;
          }
        });
      }).catch(error => {

        alertErr(error.msg);
      });

      this.orders = [];
      this.count = 0;
      this.$httpApi('/api/v1/purchaser/order/list',{
        orderCode: this.keyword == ''?null: this.keyword,
        orderStatus: this.tabSelect.value==-1?null: this.tabSelect.value,
      },'get').then(res=>{
        console.log(res)
           if (res.code == 200) {
          let list = res.rows;
          console.log(list,res)

          list.forEach((order) => {
            //order.isPay = order.value >= 0;
            // order.actions = this.getOrderActions({
            //   ...order,
            // });

            let count_goods = 0;
            order.orderGoodsList.forEach((product) => {
              count_goods = count_goods + +product.goodsNum;
            });
            order.count_goods = count_goods;

            for(let i=0; i<this.tabList.length; i++){
              if(this.tabList[i].value == order.orderStatus){
                order.statusInfo = this.tabList[i].title;
              }
            }
          });

          this.orders = list;
          this.count = res.total;
          console.log(this.orders, 'dede')
        }
      }).catch(error => {

        alertErr(error.msg);
      });

      // this.$api({
      //   url: "/service.php",
      //   method: "get",
      //   data: {
      //     action: "orders_lists",
      //     ...this.pagination,
      //     scene: this.tabSelect.value,
      //     // keyword: this.keyword,
      //   },
      // }).then((res) => {
      //   let { code, data } = res;
      //   if (code == 200) {
      //     let list = data.list;

      //     list.forEach((order) => {
      //       order.isPay = order.value >= 0;
      //       order.actions = this.getOrderActions({
      //         ...order,
      //       });

      //       let count_goods = 0;
      //       order.products.forEach((product) => {
      //         count_goods = count_goods + +product.num;
      //       });
      //       order.count_goods = count_goods;
      //     });

      //     this.orders = list;
      //     this.count = data.count;
      //   }
      // });
    },

    //根据订单状态获取订单操作结果
    getOrderActions(order) {
      let { status, status_info, ifpingjia } = order;
      let actions = [];
      // let actions = [
      //   { name: "取消订单",type: 'quxiao' },
      //   { name: "立即支付",type: 'zhifu' },
      //   { name: "确认收货",type: 'shouhuo' },
      //   { name: "评价订单",type: 'pingjia' },
      //   { name: "申请售后",type: 'shouhou' },
      //   { name: "删除订单",type: 'shanchu' },
      //   { name: "再次购买",type: 'goumai' },
      // ];

      if (status == -5) {
        //待支付
        if (status_info == "无效") {
          actions = [{ name: "取消订单", type: "quxiao" }];
        } else if (status_info == "待支付") {
          actions = [
            { name: "立即支付", type: "zhifu" },
            { name: "取消订单", type: "quxiao" },
          ];
        }
      } else if (status == -3) {
        //-3售后处理中
        actions = [{ name: "删除订单", type: "shanchu" }];
      } else if (status == -1) {
        //无效
        actions = [{ name: "删除订单", type: "shanchu" }];
      } else if (status == 0) {
        //0待成团
        actions = [{ name: "取消订单", type: "quxiao" }];
      } else if (status == 2) {
        //2待发货
        actions = [
          // { name: "取消订单", type: "quxiao" }
        ];
      } else if (status == 3) {
        //3待收货
        actions = [
          { name: "确认收货", type: "shouhuo" },
          { name: "查看物流", type: "wuliu" },
        ];
      } else if (status == 4) {
        //4已收货
        if (ifpingjia) {
          actions = [
            // { name: "删除订单", type: "shanchu" },
            // { name: "查看物流", type: "wuliu" },
            // { name: "售后", type: "shouhou" },
          ];
        } else {
          actions = [
            // { name: "删除订单", type: "shanchu" },
            // { name: "查看物流", type: "wuliu" },
            // { name: "售后", type: "shouhou" },
            //  { name: "评价", type: 'pingjia' }
          ];
        }
      }
      return actions;
    },

    do_toggle_tab(item) {
      this.tabSelect = item;
      this.pagination.page = 1;
      this.query_order();
    },

    //分页
    on_current_change() {
      this.query_order();
    },

    //搜索
    do_search() {
      this.query_order();
    },

    //重置
    do_reset() {
      this.keyword = "";
      this.pagination.page = 1;
      this.query_order();
    },

    updateView() {
      this.query_order();
    },

    toDetail(item) {
      // this.$router.push(`/order-detail?id=${item.id}`);
      this.toRoute({
        path: "/order-detail",
        query: {
          id: item.id,
        },
      });
    },
    doCancel(item) {
      this.$refs.order_cancel_modal.init(item);
    },
    doPay(item) {
      this.$router.push({
        path: "/payment-methods",
        query: {
          id: item.id,
        },
      });
    },
    doDelete(item) {
      this.$refs.order_delete_modal.init(item);
    },
    doReceive(item) {
      this.$refs.order_receive_modal.init(item);
    },
    doReview(item) {},
    doRefund(item) {
      this.$refs.order_refund_modal.init(item);
    },

    updateView() {
      this.$parent.updateView();
    },

    //处理订单行为
    handleOrderAction(action, order_id, order) {
      let fahuo_id = order.fahuo_id || "";
      //console.log({ ...action });
      let name = action.name;
      if (name == "取消订单") {
        this.orders_qxOrder(order_id);
      } else if (name == "删除订单") {
        this.orders_del(order_id);
      } else if (name == "立即支付") {
        this.order_payment(order_id);
      } else if (name == "确认收货") {
        this.order_qianshou(order_id);
      } else if (name == "评价") {
        this.jump_pingjia(order_id);
      } else if (name == "申请售后") {
        this.jump_shouhou(order_id);
      } else if (name == "查看物流") {
        this.$router.push(
          `/order-logistics?order_id=${order_id}&logistics_id=${fahuo_id}`
        );
      } else if (name == "售后") {
        this.$router.push(`/refundFeedback?order_id=${order_id}`);
      }
    },

    //取消订单
    orders_qxOrder(order_id) {
      let order = this.list.find((v) => v.id == order_id);

      // order.orders_qxOrder({
      //   params: { order_id },
      //   success: () => {
      //     this.updateView();
      //   }
      // });
    },
    //删除订单
    orders_del(order_id) {
      order.orders_del({
        params: { order_id },
        success: () => {
          this.updateView();
        },
      });
    },
    //订单支付
    order_payment(order_id) {
      this.$router.push(`/payment-methods?order_id=${order_id}`);
    },

    //订单确认收货
    order_qianshou(order_id) {
      let order = this.list.find((v) => v.id == order_id);
      this.$refs.order_receive_modal.showModal = true;
      this.$refs.order_receive_modal.order = order;
      //console.log("订单信息", { ...order });
    },

    //订单评价
    jump_pingjia(order_id) {
      this.$router.push(`/order-review-submit?order_id=${order_id}`);
    },
    //订单售后申请
    jump_shouhou(order_id) {
      this.$router.push(`/orderRefund?order_id=${order_id}`);
    },
    jump_order_detail(order) {},

    open_link(link) {
      window.open(link, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.page {
  padding-bottom: 50px;

  .w-126{
    width: 126px;
  }

  .page-title {
    padding: 0 32px;
    text-align: left;
    height: 56px;
    line-height: 56px;
    background: #ffffff;
    font-size: 16px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #333333;
  }

  .page-ctx {
    padding-top: 22px;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 36px;
    background: #fff;
  }
}

.tab-box {
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  // border: 1px solid #cccccc;

  .tab-list {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 20px;
    color: #7d7d7d;

    .tab-item {
      position: relative;
      // min-width: 96px;
      font-weight: 400;
      font-size: 14px;
      color: #333333;
      height: 48px;
      line-height: 48px;
      cursor: pointer;
      margin-right: 20px;

      .number {
        color: #EF1F1F;
      }

      &.active {
        // background: #009F39;
        // color: #fff;
        // font-weight: bold;
        // color: #009f39;
        font-weight: 500;
        color: #EF1F1F;

        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 3px;
          background: #EF1F1F;
        }
      }
    }
  }

  .search-box {
    display: flex;
    align-items: center;
    min-width: 260px;
    height: 32px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #b8c4d1;
    overflow: hidden;

    input {
      background: #fff;
      flex: 2;
      height: 100%;
      border-right: none;
      outline: none;
      padding-left: 10px;
      font-size: 12px;
    }

    button {
      width: 50px;
      height: 32px;
      background: #ffffff;
      border: 1px solid #e2e2e2;
      color: #7d7d7d;

      &:last-child {
        border-left: 0;
      }

      img {
        width: 18px;
      }
    }
  }
}

.goods-sku {
  margin: 15px 0;
}

.check-url {
  // margin: 15px 0;

  span {
    cursor: pointer;
    display: inlin-block;
    padding: 2px 4px;
    background: coral;
    color: #fff;
  }
}

.order-list-wrap {
  margin-top: 30px;
  .info-item {
    border: 1px solid #e5e5e5;
    margin-bottom: 16px;
  }

  .base-box {
    height: 48px;
    padding: 0 15px;
    background: #f5f5f5;
    border-bottom: 1px solid #e5e5e5;

    .date {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #333333;
    }

    .order-code {
      flex: 2;
      text-align: left;
      padding-left: 20px;

      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: bold;
      color: #333333;

      span {
        color: #333333;
      }
    }

    .order-state {
      padding: 3px 6px;
      // border: 1px solid #ccc;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 20px;
      color: #EF1F1F;

      // 待付款
      &.state--5 {
        // background: #ff4c29;
        // border-color: #ff4c29;
        // color: #fff;
      }

      &.state-2 {
        color: #EF1F1F;
        border-color: #EF1F1F;
      }
    }
  }

  .product-box {
    .product-list {
      .product-item {
        padding: 16px 24px;
        border-bottom: 1px solid #EBEEF5;

        font-family: OPPOSans, OPPOSans;
        font-weight: 400;
        font-size: 14px;
        color: #333333;

        &:last-child {
          border: none;
        }

        .box-image {
          width: 48px;
          height: 48px;
          cursor: pointer;
          border: 1px solid #f5f5f5;

          /deep/ img {
            width: 48px;
            height: 48px;
            object-fit: contain;
            object-fit: cover;
          }

          img {
            width: 48%;
            height: 48px;
            object-fit: contain;
            object-fit: cover;
          }
        }

        .box-title {
          flex: 1;
          text-align: left;
          padding-left: 12px;

          .product-title {
            width: fit-content;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            color: #333333;

            // &:hover {
            //   color: #009f39;
            // }
          }

          .product-sku {
            margin-top: 15px;
            min-width: 200px;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }
        }

        .box-sku {
          text-align: center;
          min-width: 200px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 24px;
        }

        .box-num {
          text-align: center;
          min-width: 150px;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 20px;
        }

        .box-price {
          text-align: center;
          min-width: 150px;

          font-family: OPPOSans, OPPOSans;
          font-weight: 400;
          font-size: 14px;
          color: #777;
        }
        .box-subtotal {
          text-align: center;
          min-width: 150px;

          font-weight: 400;
          font-size: 14px;
          color: #333333;
          line-height: 24px;
        }
        .box-refund {
          .refund-act {
            text-align: center;
            min-width: 150px;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #ff0000;
          }
        }
      }
    }
  }

  .info-heji {
    padding: 15px;
    border-top: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 20px;
    color: #7d7d7d;

    .heji {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #333333;

      .heji-num {
        margin-right: 30px;

        b {
          color: #EF1F1F;
        }
      }

      .heji-money {
        b {
          color: #EF1F1F;
        }
      }
    }

    .btn-actions {
      button {
        transition: 0.3s;
        min-width: 104px;
        height: 32px;
        background: #ffffff;
        border-radius: 4px 4px 4px 4px;
        border: 1px solid #D5DBE8;
        font-family: Arial, Arial;
        font-weight: 400;
        font-size: 14px;
        color: #333333;

        & + button {
          margin-left: 20px;
        }

        &:hover {
          opacity: 0.7;
        }

        &.btn-bg {
          background: #EF1F1F;
          color: #ffffff;
        }
      }
    }
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/shop/order-list.less"></style>

<style scoped lang="less" src="@/assets/h5css/shop/orderList.less"></style>
